const n = `<!--
 * @Description: 代码编辑器默认示例
-->
<template>
  <s-flex direction="column" gap="1em">
    <s-flex gap="1em">
      <s-select
        v-model="options.language"
        placeholder="请选择语言"
        :options="languageOptions"
        @change="handleLanguageChange"
      ></s-select>
      <s-select
        v-model="options.theme"
        placeholder="请选择主题"
        :options="themeOptions"
        @change="handleLanguageChange"
      ></s-select>
    </s-flex>
    <s-code-editor
      v-model="options.value"
      :language="options.language"
      :theme="options.theme"
      :style="{ height: '32em' }"
    ></s-code-editor>
  </s-flex>
</template>

<script lang="ts">
import {
  CodeEditor,
  CODE_EDITOR_LANGUAGE_DEFAULT,
  CODE_EDITOR_LANGUAGE_LABEL,
  CODE_EDITOR_LANGUAGE_OPTIONS,
  CODE_EDITOR_THEME_DEFAULT,
  CODE_EDITOR_THEME_LABEL,
  CODE_EDITOR_THEME_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";
import INITAL_CODE from "./inital-code";

@Component({
  components: {
    SCodeEditor: CodeEditor,
  },
})
export default class DefaultJsonEditor extends Vue {
  /**
   * @description: 语言选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly languageOptions = CODE_EDITOR_LANGUAGE_OPTIONS.map((language) => ({
    label: CODE_EDITOR_LANGUAGE_LABEL.get(language),
    value: language,
  }));

  /**
   * @description: 主题选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeOptions = CODE_EDITOR_THEME_OPTIONS.map((theme) => ({
    label: CODE_EDITOR_THEME_LABEL.get(theme),
    value: theme,
  }));

  /**
   * @description: 组件配置项
   */
  options = {
    value: "", // 代码
    language: CODE_EDITOR_LANGUAGE_DEFAULT, // 语言
    theme: CODE_EDITOR_THEME_DEFAULT, // 主题
  };

  /**
   * @description: 生命周期函数
   * @private
   * @returns
   */
  created(): void {
    this.handleLanguageChange();
  }

  /**
   * @description: 处理语言变化
   * @private
   * @returns
   */
  handleLanguageChange(): void {
    this.options.value = INITAL_CODE.get(this.options.language) ?? "";
  }
}
<\/script>
`; export { n as default };
